<template>
  <grid-layout
    :layout.sync="layout"
    :col-num="12"
    :row-height="50"
    :is-draggable="true"
    :is-resizable="true"
  >
    <grid-item
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
    >
      <component :is="item.component" />
    </grid-item>
  </grid-layout>
</template>

<script setup>
import { ref } from 'vue'
import { GridLayout, GridItem } from 'vue-grid-layout'

const layout = ref([
  { x:0, y:0, w:6, h:4, i:'0', component: 'OverviewWidget' },
  { x:6, y:0, w:6, h:4, i:'1', component: 'SecurityWidget' }
])
</script> 